<template>
  <div class="header">
    <div class="logo" @click="goHome">
      <!-- <img src="~/static/logo.png" alt=""> -->
      <span>博雅书院</span>
    </div>
    <div class="h-search">
      <van-search v-model="bookName" show-action placeholder="请输入书籍名称" @search="onSearch">
        <template #action>
          <div @click="triggerSearch">搜索</div>
        </template>
      </van-search>
    </div>
  </div>
</template>
<script>

export default {
  data(){
    return {
      bookName: this.$route.query.bookName || '',
      active:'',
    }
  },
  created() {
  },
  methods: {
    onSearch(){
      // 友盟统计
      uMengTj('搜索','搜索',this.bookName)
      if(this.$route.path === '/searchResult'){
        this.$emit('searchBook',this.bookName)
      }else{
        this.$router.push({path: '/searchResult',query: {bookName: this.bookName}})
      }
    },
    triggerSearch(){
      this.onSearch()
    },
    goHome(){
      this.commonData.clearPageHistory(this.commonData.categoryPageHistoryKey)
      this.$router.push('/')
    }
  },
}
</script>

<style lang="scss" scoped>
.header{
  display:flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e8;
  width: 100%;
  margin: auto;
  .logo{
    display: flex;
    align-items:center;
    font-size: 14px;
    img{
      width: 64px;
      height: 64px;
    }
    span{
      margin-left: 5px;
      font-size:24px;
    }
  }
  .h-search{
    width: 266px;
  }
}

</style>